<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const vDom = {
            tag: 'DIV',
            attrs: {
                id: 'app'
            },
            children: [
                {
                    tag: 'SPAN',
                    children: [
                        { tag: 'A', children: [] }
                    ]
                },
                {
                    tag: 'SPAN',
                    children: [
                        { tag: 'A', children: [] },
                        { tag: 'A', children: [] }
                    ]
                }
            ]
        }

        // 真正的渲染函数
        function _render(vnode) {
            // 这里的数据结构没有涉及到字符串和数字，这两个 if 可以省略，重点关注普通 dom 元素的情况
            console.log(typeof vnode);
            // 如果是数字类型转化为字符串
            if (typeof vnode === "number") {
                vnode = String(vnode);
            }
            // 字符串类型直接就是文本节点
            if (typeof vnode === "string") {
                return document.createTextNode(vnode);
            }
            // 普通DOM
            const dom = document.createElement(vnode.tag);
            if (vnode.attrs) {
                // 遍历属性
                Object.keys(vnode.attrs).forEach((key) => {
                    const value = vnode.attrs[key];
                    dom.setAttribute(key, value);
                });
            }
            // 子数组进行递归操作 这一步是关键
            vnode.children.forEach((child) => dom.appendChild(_render(child)));
            return dom;
        }
        const res=_render(vDom);
        console.log(res);
        document.body.appendChild(res);
    </script>
</body>

</html>